<script lang='ts' setup name='Child'>  
 import { ref,defineExpose } from 'vue' 



 const age =ref(18)
 const div1 =ref()

function changebg(){
    div1.value.style.backgroundColor = 'orange'
}


defineExpose({age})

</script>  
  
<template>  
  
    <div  ref="div1"  class="child" @click="changebg">

        age:{{ age }}

    </div>


</template>  
  
<style scoped>  
.child{
    margin: 10px;
    border: solid 1px grey;
    box-shadow: 0 0 10px green;
    width: 300px;
    height: 300px;
    cursor: pointer;
}
</style>  